<template>
  <view class="container screen-width">
    <view class="content-info">
      <view v-if="questionInfo.synopsis" class="synopsis">{{questionInfo.synopsis || ''}}</view>
      <view v-for="(item,index) in questionInfo.questionnaireFields" :key="index" class="item no">
        <view class="flex items-middle">
          <view v-if="item.whetherRequired === 1" class="must">*</view>
          <view class="lable">{{item.fieldName}}</view>
        </view>
        <input v-if="item.inputBoxType === 0" placeholder="请输入" v-model="item.fieldValue" />
        <VRadio
          v-if="item.inputBoxType === 1"
          :itemInfo="item"
          :radioList="item.fieldOptions"
          @radioChange="radioChange"
        ></VRadio>
      </view>
      <view class="main_btn" @tap="submitForm">提交</view>
    </view>
    <Festival></Festival>
  </view>
</template>
<script>
import {
  getQuestionnaireInfo,
  submitQuestion
} from "../../util/api/question.js";
import { isWeixin, wxShareConfig } from "../../util/wx.js";
export default {
  data() {
    return {
      name: "",
      phone: "",
      companyName: "",
      product: "",
      id: "", //问卷id
      questionInfo: {},
      questionInfoArr: [],
      optionId: "",
      form: {
        fieldOptions: [],
        questionnaireId: ""
      }
    };
  },
  onLoad(e) {
    this.id = e.id;
    this.getQuestionInfo();
  },
  methods: {
    async getQuestionInfo() {
      const data = await getQuestionnaireInfo(this.id);
      this.questionInfo = data.result;
      this.form.questionnaireId = data.result.projectId;
      this.questionInfoArr = data.result.questionnaireFields;
      this.questionInfoArr.forEach(item => {
        if (item.inputBoxType === 0) {
          item.fieldValue = "";
        } else {
          item.optionId = "";
        }
      });
      if (isWeixin()) {
        this.initShareConfig();
      }
    },
    submitForm() {
      this.form.fieldOptions = JSON.parse(JSON.stringify(this.questionInfoArr));
      // 筛选单选，将选中的optionId赋值给外层对象
      this.form.fieldOptions.forEach(item => {
        if (item.inputBoxType === 1) {
          item.fieldOptions.forEach(k => {
            if (k.checked === true) {
              item.optionId = k.optionId;
            }
          });
        }
      });
      // 判断必填字段
      for (let i = 0; i < this.form.fieldOptions.length; i++) {
        let obj = this.form.fieldOptions[i];
        if (obj.inputBoxType === 0 && obj.whetherRequired === 1) {
          if (obj.fieldValue === "") {
            uni.showToast({
              title: `${obj.fieldName}未填写`,
              duration: 2000,
              icon: "none"
            });
            return;
          }
        } else if (obj.inputBoxType === 1 && obj.whetherRequired === 1) {
          if (obj.optionId === "" || obj.optionId === undefined) {
            uni.showToast({
              title: `${obj.fieldName}未填写`,
              duration: 2000,
              icon: "none"
            });
            return;
          }
        }
      }
      submitQuestion(this.form).then(res => {
        if (res.code === 200) {
          uni.showToast({
            title: "提交成功！",
            duration: 2000,
            icon: "none"
          });
        }
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/index/index"
          });
        }, 1000);
      });
    },
    radioChange(value, info) {
      let arr = [];
      // 先判断外层的字段，在判断选中的字段，将选中的数组字段checked设置为true
      this.questionInfoArr.forEach(item => {
        if (item.fieldId === info.fieldId) {
          item.fieldOptions.forEach(k => {
            if (k.optionId === value) {
              k.checked = true;
            } else {
              k.checked = false;
            }
          });
        }
      });
    },
    initShareConfig() {
      let _this = this;
      let windowurl = window.location.href.split("#")[0];
      uni.request({
        url: "https://oldm.51bmj.cn/WeiXin/GetClientSign", //仅为示例，并非真实接口地址。
        data: {
          rawUrl: windowurl
        },
        dataType: "json",
        header: {
          "X-Requested-With": "XMLHttpRequest"
        },
        method: "GET",
        success: res => {
          if (res.statusCode == 200) {
            let { data } = res;
            let shareInfo = {
              title: _this.questionInfo.projectName,
              desc: "政策尽知 红利尽享",
              link: window.location.href
            };
            wxShareConfig(this.$wx, data, shareInfo);
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  .content-info {
    padding: 30upx;
    box-sizing: border-box;
    .synopsis {
      font-size: 24upx;
      color: #bbb;
      margin-bottom: 20upx;
    }
    .item {
      margin-bottom: 20upx;
      .lable-info {
        width: 160upx;
      }
      .must {
        color: red;
      }
      input {
        border: 1px solid #ccc;
        border-radius: 10upx;
        width: 80%;
        min-height: 60upx;
        padding: 10upx;
        box-sizing: border-box;
      }
      textarea {
        border: 1px solid #ccc;
        border-radius: 10upx;
        width: 100%;
        padding: 10upx;
        box-sizing: border-box;
        margin-top: 15upx;
      }
    }
    .no {
      input {
        width: 100%;
        margin-top: 15upx;
      }
    }
    .main_btn {
      margin-top: 80rpx;
      background-color: #1678ff;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }
}
</style>